import React, {Component} from 'react';
import { Page} from 'react-pdf';//Document不要在此加载会影响性能
import { Document } from 'react-pdf/dist/entry.webpack';//加快pdf的加载
import {Pagination} from 'antd'
import {URL} from '../../../src/constant/Constant';


/**
 *
 * @description: pdf预览
 * @author: zm
 *
 */
export default class PdfPreview extends Component {
    state = {
        path: '',//请求路径
        numPages: null,//页面的总数
        pageNumber: 1,//当前页面的位置
    }

    componentWillReceiveProps(nextProps, nextContext) {

        console.log(nextProps.path)

        this.setState({
            path:URL.urlRoot + nextProps.path//拼接地址
            //path: "http://duodao.chende.top" + nextProps.path//拼接地址
            //path:"http://127.0.0.1:8080"+nextProps.path,
        },()=>{
            console.log("测试地址")
            console.log(this.state.path)
            console.log("测试地址")

        })
    }


    onDocumentLoadSuccess = ({numPages}) => {
        this.setState({numPages});
    }

    onChangePage = (page) => {
        this.setState({pageNumber: page});
    }

    render() {
        const {pageNumber, numPages, path} = this.state;

        return (
            <div>
                <Document///file?fileName=%E6%88%91%E5%9B%BD%E6%B0%B4%E6%B3%A5%E5%B7%A5%E4%B8%9A%E4%BA%A7%E8%83%BD%E5%8F%8A%E8%83%BD%E8%80%97%E7%8E%B0%E7%8A%B6%E6%B5%85%E6%9E%90-%E8%B5%B5.pdf
                    options={{
                        cMapUrl: "cmaps/ ",
                        cMapPacked: true
                    }}
                    file={path}
                    //file="http://duodao.chende.top/file?fileName=%E4%B8%8D%E5%90%8C%E6%B0%B4%E6%B3%A5%E7%B2%89%E7%A3%A8%E7%B3%BB%E7%BB%9F%E7%94%B5%E8%80%97%E6%AF%94%E8%BE%83-%E8%B5%B5.pdf"
                    onLoadSuccess={this.onDocumentLoadSuccess}
                >
                 <Page
                        pageNumber={pageNumber}
                        width={800}
                    />

                </Document>
                <Pagination
                    style={{float:"right"}}
                    total={numPages}
                    showTotal={total => `共 ${total} 页`}
                    current={pageNumber}
                    pageSize={1}
                    size='small'
                    onChange={this.onChangePage}
                />
                <span>Page {pageNumber} of {numPages} ===></span><span>
                   <a href={path}>
                       {'点击我下载'}
                </a>
            </span>

            </div>
        );
    }
}